<template>
  <main class="music_main">
    <aplayer :audio="audio" class="music_aplayer" ref="aplayer"
             :listMaxHeight="150"
             :listFolded="true"
             @Play="handleEvent"/>
  </main>
</template>

<script>
export default {
  name: "music",
  data() {
    return {
      musicData: {},
      musicList: [],
      lyric: '',
      audio: [
        {  //歌单格式
          name: '东西（Cover：林俊呈）',
          artist: '纳豆',
          url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
          cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
          theme: this.randomColor(),
        }, {
          name: '123123123',
          artist: '测试文字',
          url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
          cover: 'https://s.cn.bing.net/th?id=OHR.Monteverde_ZH-CN9598634812_768x1366.jpg&rf=LaDigue_1920x1080.jpg&qlt=30', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
          theme: this.randomColor(),
        }
      ]
    }
  },
  methods: {
    randomColor() {
      return `#${((Math.random() * 0xffffff) << 0).toString(16)}`;
    },
    handleEvent(event) {
      console.log(123123)
    },
    async getPlayListId() {
      await this.$getRequest({
        url: '/user/playlist',
        params: {
          uid: this.$store.state.userId
        }
      }).then(res => {
        if (res.code !== 200) return 0;
        this.$store.state.playListId = res['playlist'][0]['id'];
      })
    },
    async getMusicList() {
      try {
        await this.getPlayListId();
        await this.$getRequest({
          url: '/playlist/track/all',
          params: {
            id: this.$store.state.playListId,
            limit: 20
          }
        }).then(res => {
          if (res.code !== 200) return 0;
          this.musicList = res['songs'];
        })
        this.audio = this.musicList.map((item) => {
          return {
            id: item['id'],
            name: item['name'],
            artist: item['ar'][0]['name'],
            url: '',
            cover: item['al']['picUrl'],
            // lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
            theme: this.randomColor(),
          }
        })
        for (let i = 0; i < this.audio.length; i++) {
          this.$getRequest({
            url: '/song/url',
            params: {
              id: this.audio[i]['id']
            }
          }).then(res => {
            this.audio[i]['url'] = res.data[0]['url'];
          })
        }
        // console.log(this.audio);
      } catch (e) {
        console.log(e)
      }

    }
  },
  mounted() {
    this.getMusicList()
    // console.log(this.$refs.aplayer.currentMusic);
  }
}
</script>

<style scoped>

</style>
